<template>
  <view class="searchComBox">
    <!-- 搜索框 -->
    <view class="searchInput">
      <uni-icons type="search" size="20" color="#bfbfbf"></uni-icons>
      <input
        type="text"
        v-model.trim="searchValue"
        maxlength="20"
        placeholder="找找资源"
        placeholder-class="input-placeholder"
        :disabled="props.disabled"
        :style="{ width: props.disabled ? '100%' : '560rpx' }"
        @input="handleInput($event)"
      />
      <!-- 取消搜索按钮 -->
      <view class="cancel" @click="back" v-if="!props.disabled">取消</view>

      <view v-else class="scan" @click.stop="scan"
        ><uni-icons type="scan" size="28" color="#bfbfbf"></uni-icons
      ></view>
    </view>
  </view>
</template>

<!-- 搜索栏组件 -->

<script lang="ts" setup>
import uniIcons from '@/components/uni/uni-icons/uni-icons.vue'
import {
  onLoad,
  onReady,
  onShow,
  onHide,
  onUnload,
  onPageScroll,
} from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue'

//接受父组件的值是否禁用输入框,默认禁用
const props = defineProps({
  disabled: {
    type: Boolean,
    default: true,
  },
} as const) //as const表示只读

//监听搜索输入框值事件
const handleInput = (event: AnyObject) => {
  //清除所有空格
  const valueWithoutSpaces = event.target.value.replace(/\s/g, '')
  // 只有当输入非空格字符时才更新状态
  if (valueWithoutSpaces !== '') {
    searchValue.value = valueWithoutSpaces
  }
}

//搜索输入框值
const searchValue = ref<string | Number>()

//取消搜索,返回上一级
const back = () => {
  uni.navigateBack()
}

//扫描二维码
const scan = () => {
//   uni.scanCode({
// 	success: function (res) {
// 		console.log('条码类型：' + res.scanType);
// 		console.log('条码内容：' + res.result);
// 	}
// });



}

// 页面周期函数--监听页面加载
onLoad(() => {})

// 页面周期函数--监听页面初次渲染完成
onReady(() => {})
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => {})
// 页面周期函数--监听页面隐藏
onHide(() => {})
// 页面周期函数--监听页面卸载
onUnload(() => {})
</script>

<style scoped lang="scss">
.searchComBox {
  .searchInput {
    width: 680rpx;
    height: 65rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    background-color: rgba(238, 234, 234, 0.741);
    border-radius: 10rpx;
    padding: 10rpx;

    image {
      width: 40rpx;
      height: 40rpx;
    }

    input {
      color: rgb(10, 9, 9);
      text-indent: 8rpx;
      font-size: 28rpx;
    }

    .cancel {
      width: 80rpx;
      height: 65rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: $uni-bg-color-mask;
    }

    .scan {
      padding: 20rpx 15rpx;
      z-index: 9;
    }
  }
}
</style>
